<template>
  <div>
    <div class="tableDiv">
      <JTable ref="jtable"
        :table="sheet"
        :scale.sync = "scale"
        :workbook="workbook"
        @CellDoubleClick="this.CellDoubleClick"
        @SelectionChanged="this.SelectionChanged"
        @EditEnded="this.EditEnded"
      ></JTable>
    </div>
    <div style="display: block;margin: 5px;">
      <div>
        <button @click="downloadBtnClick">下载</button>
      </div>
      <div class="slider" style="display:inline-flex; width: 400px; height: 20px"
        >
        <span style="width: 90px;">缩放 {{scaleValue+'%'}} </span>
        <div style="display: inline-block; width:200px">
          <JSlider :min="10" :max="200" :value.sync="scaleValue" @changed="updateScale" ></JSlider>
        </div>
        <button style="padding-left: 5px;padding-left: 5px; padding-top: 0px;" @click="()=>scaleValue=100">重置</button>
      </div>
    </div>
  </div>
</template>

<script>
import JTable from "./JTable.vue";
import JSlider from "../Package/JSlider/JSlider.vue";
import ExcelJS from "exceljs";
import JTestCellType from "./JTestCellType.vue";
export default {
  components: { JTable, JSlider },
  data() {
    return {
      sheet: null,
      workbook: null,
      workbookExcelJs:null,
      scaleValue: 100,      
    };
  },
  computed:{
    scale:{
      get(){
        return this.scaleValue/100;
      },
      set(newVal){
        this.scaleValue = Math.floor(newVal * 100);
      }
    }
  },
  async mounted() {
    const response = await fetch("/test.xlsx");
    if (response.ok) {
      const arrayBuffer = await response.arrayBuffer();
      const workbook = new ExcelJS.Workbook();
      await workbook.xlsx.load(arrayBuffer);
      this.workbookExcelJs = workbook;
      const model = workbook.xlsx.workbook.model;
      console.log("workbook", workbook);
      console.log("model", model);
      this.workbook = model;
      this.sheet = model.sheets[0];
      this.sheet.tag = {};
      // 测试的代码
      // this.sheet.tag.isReadOnly = true;
      // this.sheet.rows[0].cells[0].tag = this.sheet.rows[0].cells[0].tag || {}
      // this.sheet.rows[0].cells[0].tag.cellType = JTestCellType;
    } else {
      console.error("Failed to fetch the Excel file");
    }
  },
  watch:{
    scaleValue(val){
      // this.changed()
    }
  },
  methods: {
    // changed() {
    //   this.styleObject.transform=`scale(${this.scaleValue/100})`;      
    // }
    updateScale(scale){
      this.scaleValue = scale
    },
    CellDoubleClick(cell){
      // console.log('dbclicked In Demo',cell);
    },
    SelectionChanged(selection){
      // console.log('seletctionChanged In Demo',selection);
    },
    EditEnded()
    {
      // console.log('editEND',arguments)
    },
    BinaryFileToFile(buf, fileName, type) {
      const aLink = document.createElement('a')
      var blob = new Blob([buf], { type })
      aLink.href = URL.createObjectURL(blob)
      aLink.download = fileName // 设置下载文件名称
      document.body.appendChild(aLink)
      aLink.click()
      aLink.remove()
    },
    async downloadBtnClick(){
      const buffer = await this.workbookExcelJs.xlsx.writeBuffer()
      this.BinaryFileToFile(buffer,'test.xlsx',)
    }
  }
}
</script>

<style scoped>
.slider {
  --theme-primary-color: #0091ff;
  --theme-text-color: #ff2600fe;
  --theme-obprimary-color: white;
}
.tableDiv {
  width: 100%;
  height: 900px;
  background: gray;
  position: relative;
  overflow: hidden;
  border: 1px solid #0091ff;
}
</style>
